:root {
    --bg-color: rgb(250, 250, 250);
    --bg-color2: rgb(237, 237, 239);

    --text-color: #000;
    --text-grey: #666;
    --text-code: #2f479f;
    --title-color: #070909;
    --border-color: #d2d2d2;

    --color-1: #3e69d7;
    --color-1-0-a: rgba(62, 105, 215, 0.15);
    --color-1-0-b: rgba(62, 105, 215, 0.06);

    --color-2: #f59102;
    --color-2-0-a: rgba(245, 145, 2, 0.15);
    --color-2-0-b: rgba(245, 145, 2, 0.06);
    --color-2-0-c: rgba(245, 145, 2, 0.3);

    --color-3: #03b736;
    --color-3-0-a: rgba(3, 183, 54, 0.15);
    --color-3-0-b: rgba(3, 183, 54, 0.06);

    --color-4: #8250df;
    --color-4-0-a: rgba(130, 80, 223, 0.15);
    --color-4-0-b: rgba(130, 80, 223, 0.06);

    --color-5: #e30f2e;
    --color-5-0-a: rgba(227, 15, 46, 0.15);
    --color-5-0-b: rgba(227, 15, 46, 0.06);

    --md-char-color: rgba(72, 93, 108, 0.75);
    --meta-content-color: var(--md-char-color);
    --primary-color: var(--color-1);
    --primary-btn-border-color: var(--bg-color2);
    --primary-btn-text-color: var(--text-color);
    --window-border: 1px solid var(--border-color);
    --active-file-bg-color: var(--bg-color2);
    --active-file-text-color: var(--color-1);
    --active-file-border-color: var(--color-1);
    --side-bar-bg-color: var(--bg-color);
    --item-hover-bg-color: var(--bg-color2);
    --item-hover-text-color: var(--color-1);
    --select-text-bg-color: var(--color-1-0-a);
    --monospace: monospace;

    /*--mermaid-theme: neutral;*/
    /*or base, dark, forest, neutral, night*/
    --mermaid-font-family: "trebuchet ms", verdana, arial, sans-serif;
    --mermaid-sequence-numbers: on;
    --mermaid-flowchart-curve: linear;
    --mermaid--gantt-left-padding: 75;
}

.markdown-preview.markdown-preview {
    font-family: "Microsoft YaHei";
    font-size: 8px;

    &.prince {
        counter-reset: page 0;

        @page {
            size: A5;
            counter-increment: page 1;

            //设置边距
            margin-top: 2cm;
            margin-bottom: 2cm;
            margin-inside: 2cm; //内边距
            margin-outside: 1cm; //外边距

            @bottom {
                font-size: 8px;
                border-top: 1pt solid #eeeeee;
                margin: 5px 0px 15px;
                content: counter(page) //打印页码
            }

            @top {
                font-size: 8px;
                content: string(doctitle) " " string(doctitle_2) //打印页眉，格式为 年 月
            }
        }

        h1 {
            string-set: doctitle content()
        }

        h2 {
            string-set: doctitle_2 content()
        }
    }


    html {
        font-size: 8px;
        background-color: var(--bg-color);
        color: var(--text-color);
        letter-spacing: 0.2px;
        -webkit-font-smoothing: antialiased;
    }

    body {
        font-size: 8px;
        line-height: 1.6;
        box-sizing: border-box;
        overflow-x: hidden;
        font-family: "PingFang SC", "Microsoft YaHei", Arial, Helvetica, "Helvetica Neue", sans-serif !important;
        background: var(--bg-color);
    }

    body.os-windows {
        font-family: "Microsoft YaHei", Helvetica, "Helvetica Neue", Arial, sans-serif !important;
    }

    /*
     * ------------------------
     * scroll style
     * ------------------------
    */
    ::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--border-color) !important;
        border-radius: 2px !important;
    }

    ::-webkit-scrollbar-track {
        background: var(--bg-color2) !important;
    }

    body,
    body div,
    body pre,
    body ul,
    body section,
    body content,
    body #write {
        scrollbar-color: var(--border-color) var(--bg-color2) !important;
        scrollbar-width: thin !important;
    }

    body,
    #megamenu-content,
    header {
        background: var(--bg-color) !important;
    }

    header {
        box-shadow: 0 1px 1px 0 rgba(27, 27, 31, 0.16), 0 1px 2px 0 rgba(27, 27, 31, 0.1);
    }

    /*
     * -----------------------------------
     * h1 ~ h6
     * p, strong, dl, em, u, kbd, hr, mark
     * -----------------------------------
    */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        position: relative;
        line-height: 1.5;
        margin: 16px 0 8px;
        color: var(--title-color);
        letter-spacing: 1px;
    }

    h1 {
        font-size: 16px;
        border-bottom: 1px solid var(--border-color);
    }

    h2 {
        font-size: 14px;
    }

    h3 {
        font-size: 12px;
    }

    h4 {
        font-size: 10px;
    }

    h5 {
        font-size: 9px;
    }

    h6 {
        font-size: 8px;
    }

    h2.md-focus:before,
    h3.md-focus:before,
    h4.md-focus:before,
    h5.md-focus:before,
    h6.md-focus:before,
    h2:before,
    h3:before,
    h4:before,
    h5:before,
    h6:before {
        height: 10px;
        position: absolute;
        left: -18px;
        float: left;
        padding-left: 3px;
        padding-right: 1px;
        border: 1px solid;
        border-radius: 1px;
        font-size: 6px;
        font-weight: 400;
        color: var(--color-1);
        display: none;
    }

    h2:before,
    h2.md-focus:before {
        content: 'h2';
        top: 5px;
    }

    h3:before,
    h3.md-focus:before {
        content: 'h3';
        top: 4px;
    }

    h4:before,
    h4.md-focus:before {
        content: 'h4';
        top: 2px;
    }

    h5:before,
    h5.md-focus:before {
        content: 'h5';
        top: 2px;
    }

    h6:before,
    h6.md-focus:before {
        content: 'h6';
        top: 1px;
    }

    h2:hover::before,
    h3:hover::before,
    h4:hover::before,
    h5:hover::before,
    h6:hover::before {
        display: block;
    }

    hr {
        border: none;
        height: 1px;
        margin: 8px 0;
        background: var(--border-color);
        box-sizing: border-box;
    }

    p {
        margin: 8px 0;
    }

    strong {
        font-weight: bold;
        color: var(--title-color);
    }

    u {
        text-decoration-color: var(--title-color);
        text-underline-offset: 2px;
    }

    em {
        font-weight: 400;
    }

    del {
        color: var(--text-grey);
        text-decoration: line-through;
        text-decoration-color: var(--color-5);
        -moz-text-decoration-color: var(--color-5);
    }

    mark {
        background-color: var(--color-1);
        color: var(--bg-color);
        padding: 0 2px;
        border-radius: 2px;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    /*
     * ------------------------
     * image
     * ------------------------
    */
    img {
        display: block;
        max-width: 100%;
        border-radius: 4px;
        margin: 0 auto 8px;
        color: var(--md-char-color);
    }

    span.md-image,
    span.md-image span.md-content,
    span.md-image span.md-image-src-span,
    span.md-image span.md-image-before-src,
    span.md-image span.md-image-after-src,
    span.md-image span.md-image-input-src-btn,
    span.md-image span.md-image-pick-file-btn,
    span.md-image span.md-before::before,
    span.md-image span.md-image-input-src-btn::before,
    span.md-image span.md-image-pick-file-btn::before {
        color: var(--color-1);
    }

    span.md-image-btn {
        background: var(--bg-color2);
    }

    span.md-image-btn:hover::before {
        color: var(--bg-color) !important;
    }

    span.md-image span.md-image-pick-file-btn {
        border-left-color: var(--border-color);
    }

    /*
     * ------------------------
     * a, link
     * ------------------------
    */
    a {
        font-weight: 500;
        text-decoration: none;
        color: var(--color-1);
        font-size: 8px;
        text-underline-offset: 2px;
    }

    a:hover,
    .md-link a:hover,
    .footnotes a:hover {
        color: var(--color-1);
        text-decoration: underline;
        cursor: pointer !important;
    }

    .unibody-window a:hover,
    content a:hover {
        color: var(--color-2) !important;
    }

    .footnotes,
    .footnotes a {
        font-size: 7px;
        text-decoration: none;
    }

    .footnotes .md-def-name::before,
    .footnotes .md-def-name::after {
        color: var(--text-color);
    }

    .footnotes .md-def-url,
    .md-link .md-url {
        text-decoration: none;
        color: var(--color-1);
    }

    /*
     * ------------------------
     * ul, ol
     * ------------------------
    */
    ul {
        margin-left: 0;
        margin-top: 2px;
        margin-bottom: 2px;
        padding-left: 18px;
    }

    ol {
        margin-left: 0;
        margin-top: 2px;
        margin-bottom: 2px;
        padding-left: 20px;
    }

    ul li,
    ol li {
        margin-bottom: 2px;
    }

    ul>li>p {
        margin: 0 0 0 -1px;
    }

    ol>li>p {
        margin: 0 0 0 -3px;
    }

    ul>.task-list-item>input {
        margin-left: -11px;
    }

    ul ul {
        margin-left: -1px;
    }

    ol ol {
        margin-left: -3px;
    }

    ol>li>ul {
        margin-left: -3px;
    }

    ul>li>ol {
        margin-left: -1px;
    }

    /*
     * ------------------------
     * code
     * ------------------------
    */
    code,
    tt {
        margin: 8px 0;
        background: var(--bg-color2);
        font-size: 7px;
        box-sizing: border-box;
        border-radius: 2px;
        padding: 2px 5px;
        color: var(--text-code);
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    p code,
    p tt,
    /* li code, */
    li tt,
    blockquote code,
    blockquote tt,
    .md-alert code,
    .md-alert tt,
    table code,
    table tt {
        padding: 1px 3px !important;
        background: var(--color-1-0-a);
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    h1 code,
    h2 code,
    h3 code,
    h4 code,
    h5 code,
    h6 code {
        vertical-align: middle;
    }

    h1 code {
        font-size: 9px;
    }

    h2 code {
        font-size: 8px;
    }

    .outline-content .outline-item code {
        font-size: 5px;
        padding: 1px 3px !important;
    }

    /*
     * ------------------------
     * pre
     * ------------------------
    */
    pre {
        margin: 8px 0;
        padding: 8px;
        background: var(--bg-color2) !important;
        font-size: 7px !important;
        box-sizing: border-box;
        border-radius: 4px;
        color: var(--text-code);
        overflow: auto;
    }

    pre pre {
        background: transparent !important;
        padding: 2px 5px;
        border: none;
    }

    pre .CodeMirror-sizer {
        padding-left: 5px;
    }

    /*windows下code字体*/
    .os-windows pre,
    .os-windows code {
        font-family: initial !important;
    }

    /*
     * ------------------------
     * blockquote
     * ------------------------
    */
    blockquote,
    .md-alert {
        margin: 8px 0;
        padding: 8px;
        background: var(--color-1-0-b);
        box-sizing: border-box;
        border-right: 5px solid transparent;
        border-left: 2px solid var(--color-1);
        border-radius: 4px;
    }

    blockquote blockquote {
        background: var(--color-1-0-b);
    }

    .md-alert.md-alert-note {
        border-left-color: var(--color-1);
        background: var(--color-1-0-b);
        color: var(--color-1) !important;
    }

    .md-alert.md-alert-note .md-alert-text-note {
        color: var(--color-1);
    }

    .md-alert.md-alert-caution {
        border-left-color: var(--color-2);
        background: var(--color-2-0-b);
        color: var(--color-2) !important;
        ;
    }

    .md-alert.md-alert-caution .md-alert-text-caution {
        color: var(--color-2);
    }

    .md-alert.md-alert-tip {
        border-left-color: var(--color-3);
        background: var(--color-3-0-b);
        color: var(--color-3) !important;
    }

    .md-alert.md-alert-tip .md-alert-text-tip {
        color: var(--color-3);
    }

    .md-alert.md-alert-important {
        border-left-color: var(--color-4);
        background: var(--color-4-0-b);
        color: var(--color-4) !important;
    }

    .md-alert.md-alert-important .md-alert-text-important {
        color: var(--color-4);
    }

    .md-alert.md-alert-warning {
        border-left-color: var(--color-5);
        background: var(--color-5-0-b);
        color: var(--color-5) !important;
    }

    .md-alert.md-alert-warning .md-alert-text-warning {
        color: var(--color-5);
    }

    /*
     * ------------------------
     * sup, sub, kbd
     * ------------------------
    */
    sup,
    sub {
        font-size: 6px;
    }

    sup.md-footnote {
        background: transparent;
        padding: 0 1px;
        color: var(--color-1);
    }

    sup.md-footnote:hover {
        color: var(--color-2);
        cursor: pointer;
    }

    kbd {
        display: inline-block;
        border: none;
        background: var(--title-color);
        color: var(--bg-color);
        border-image: none;
        border-radius: 2px;
        padding: 0 3px;
        font-size: 7px;
        box-shadow: none;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    ::selection {
        background: var(--color-2-0-c);
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    /*
     * ------------------------
     * table
     * ------------------------
    */
    figure.table-figure {
        margin-top: 12px !important;
    }

    table {
        width: 100%;
        margin-top: 8px;
        text-align: left;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 4px;
        overflow: hidden;
        padding: 0 !important;
        border: 1px solid var(--border-color) !important;
    }

    table thead tr th {
        background: var(--bg-color2);
    }

    table tbody tr:nth-child(even) td {
        background: var(--bg-color2);
    }

    table tbody tr:nth-child(odd) td {
        background: var(--bg-color);
    }

    table tr th,
    table tr td {
        padding: 5px !important;
    }

    table tr td,
    table thead tr th {
        border-left: 1px solid var(--border-color) !important;
    }

    table tbody tr td:first-of-type,
    table thead tr th:first-of-type {
        border-left: none !important;
    }

    .md-grid-board-wrap table {
        border: none !important;
        border-radius: 0;
    }

    .md-grid-board-wrap table tr th,
    .md-grid-board-wrap table tr td {
        padding: 0 !important;
    }

    #md-grid-width,
    #md-grid-height {
        text-align: center !important;
        padding: 1px 0;

    }

    button#md-resize-grid {
        display: block !important;
        width: 100%;
        margin: 2px auto 0;
        color: var(--bg-color);
    }

    button#md-resize-grid:hover {
        color: var(--color-1);
        border-color: var(--color-1);
    }

    /*
     * ------------------------
     * btn
     * ------------------------
    */
    .btn,
    .btn-default,
    .long-btn {
        border-radius: 2px !important;
        border: 1px solid var(--border-color) !important;
        background: var(--bg-color2) !important;
        outline: none !important;
    }

    .btn-primary {
        background: var(--color-1) !important;
        border-color: var(--color-1) !important;
        color: #fff;
    }

    .btn:hover,
    .long-btn:hover {
        background: var(--color-1-0-b) !important;
        color: var(--color-1);
        border-color: var(--color-1) !important;
    }

    .btn:focus,
    .long-btn:focus {
        outline: none !important;
    }

    .btn {
        margin: 1px;
        margin-right: 2px !important;
    }

    .btn:last-of-type {
        margin-right: 0;
    }

    .dropdown-toggle::after {
        font-size: 7px;
    }

    .dropdown-toggle:hover::after {
        color: var(--color-1);
    }

    /*
     * ------------------------
     * select
     * ------------------------
     */
    select {
        border-radius: 2px !important;
        border: 1px solid var(--border-color) !important;
        padding: 3px !important;
    }

    option {
        background: var(--bg-color);
    }

    /*
     * ------------------------
     * textarea
     * ------------------------
     */
    textarea {
        outline: none;
        padding: 2px;
        border-radius: 2px;
        border-color: var(--border-color);
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
        font-family: "PingFang SC", "Helvetica Neue", Helvetica, "Microsoft YaHei", Arial, sans-serif !important;
    }

    /*
     * ------------------------
     * input
     * ------------------------
    */
    html input,
    input {
        border-radius: 2px !important;
        line-height: 1.2;
        position: relative;
        padding: 0 3px;
        outline: none !important;
        border: 1px solid var(--border-color);

    }

    html input:focus,
    html textarea:focus,
    html input[type="number"]:focus,
    html input[type="search"]:focus,
    html input[type="text"]:focus {
        border-color: var(--color-1) !important;
        box-shadow: none !important;
        outline: none !important;
    }

    input::placeholder {
        font-size: 7px;
        color: var(--text-grey) !important;
    }

    /*input checkbox*/
    input[type="checkbox"],
    input[type="radio"] {
        outline: none;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        width: 7px !important;
        height: 7px !important;
        padding: 0 !important;
        box-sizing: border-box;
        border: 1px solid var(--border-color) !important;
        border-radius: 1px !important;
        list-style: none;
        background: transparent !important;
        margin-right: 5px !important;
        margin-bottom: -1px !important;
    }

    input[type="checkbox"]:checked,
    input[type="radio"]:checked {
        background: var(--color-1) !important;
        border-color: transparent !important;
    }

    input[type="checkbox"]:checked::after {
        content: "";
        display: block;
        width: 2px;
        height: 4px;
        background: transparent;
        border: 1px solid #fff;
        border-top: none;
        border-left: none;
        position: absolute;
        box-sizing: border-box;
        bottom: 2.2px;
        left: 3.2px;
        transform: rotate(40deg);
        -webkit-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
    }

    input[type="radio"] {
        border-radius: 50% !important;
        -webkit-border-radius: 50% !important;
        -moz-border-radius: 50% !important;
        border: 1px solid var(--border-color) !important;
    }

    input[type="radio"]:checked::after {
        content: "";
        display: block;
        width: 2px;
        height: 2px;
        box-sizing: border-box;
        margin: 3.2px auto;
        background: #fff;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
    }

    span.md-comment {
        color: var(--md-char-color);
        opacity: 1;
    }

    .md-image-btn.selected,
    .md-image-btn:hover {
        background: var(--color-1);
    }

    #write pre.md-meta-block:empty:before {
        color: var(--text-code);
    }

    /*md-htmlblock*/
    .md-htmlblock-panel,
    .md-htmlblock-container,
    .md-htmlblock-container .md-htmlblock-panel-placeholder {
        background: transparent;
    }

    .md-htmlblock-container,
    .md-math-container {
        border-radius: 4px;
        background: var(--bg-color);
    }

    .md-math-container {
        width: 100%;
        padding: 2px 5px;
    }

    .md-rawblock-on-edit .md-htmlblock-panel,
    .md-rawblock-on-edit .md-mathblock-panel {
        border-radius: 4px;
        background: var(--bg-color2);
        padding: 2px 5px;
    }

    .md-mathblock-panel .md-rawblock-control {
        background: transparent;
    }

    .md-mathblock-panel .code-tooltip {
        box-shadow: none;
        margin: 8px 3px 0;
        border-top: 1px solid var(--border-color);
        border-radius: 0;
    }

    .md-rawblock-on-edit .md-rawblock-input {
        padding: 0;
        background: transparent;
    }

    .md-rawblock .md-rawblock-tooltip {
        height: auto;
        margin-top: - 5px;
        float: right;
        border-radius: 2px;
        background: var(--bg-color2);
        animation: none !important;
    }

    .md-rawblock .md-rawblock-tooltip span {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .md-rawblock .md-rawblock-tooltip-edit-btn:hover {
        background: transparent;
    }

    .md-htmlblock:hover .md-htmlblock-container,
    .md-htmlblock:hover .md-rawblock-tooltip,
    .md-math-block:hover .md-math-container,
    .md-math-block:hover .md-rawblock-tooltip,
    .md-rawblock-on-edit:hover .md-rawblock-tooltip {
        background: var(--bg-color2);
    }

    .md-inline-math script {
        color: #f9007c;
    }

    /* #write */
    #write {
        width: 100%;
        margin: 0 auto;
        padding: 0 48px 16px;
        scroll-behavior: smooth;
        scroll-padding: 5px;
        overflow-x: scroll;
    }

    #typora-sidebar {
        border-right-color: var(--border-color);
    }

    /*
     * ------------------------
     * typora-source
     * ------------------------
    */
    #typora-source .CodeMirror-sizer {
        padding-right: 0 !important;
    }

    #typora-source .CodeMirror-lines {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        padding: 16px 50px;
        box-sizing: border-box;
    }

    #typora-source .CodeMirror-lines pre {
        font-size: 8px !important;
        border: none !important;
        padding: 4px 8px !important;
        background: var(--bg-color) !important;
    }

    #typora-source .CodeMirror-activeline pre {
        background: var(--bg-color2) !important;
        border-radius: 3px;
    }

    #typora-source .CodeMirror-activeline .CodeMirror-linebackground {
        background: transparent !important;
    }

    #typora-source .CodeMirror-lines .cm-header {
        color: var(--color-2);
    }

    .CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
        border-left: 1px solid var(--color-2);
    }

    .cm-s-typora-default .cm-header,
    .cm-s-typora-default .cm-property,
    .cm-s-typora-default .cm-link {
        color: var(--color-2);
    }

    .cm-s-inner .cm-comment,
    .cm-s-inner.cm-comment,
    .cm-overlay {
        color: var(--md-char-color);
    }

    .cm-s-typora-default .cm-string {
        color: var(--color-1);
    }

    .cm-s-typora-default .cm-code,
    .cm-s-typora-default .cm-comment {
        color: var(--text-code);
    }

    .cm-s-typora-default .cm-tag {
        color: #e31570;
    }

    .cm-attribute {
        color: var(--color-2);
    }

    /*
     * ------------------------
     * #toc-dropmenu
     * ------------------------
    */
    #toc-dropmenu {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        top: calc(var(--title-bar-height) - 1px) !important;
        right: 9px;
    }

    #toc-dropmenu #pin-outline-btn {
        display: inline-block;
        top: 5px;
    }

    #toc-dropmenu .divider {
        margin-bottom: 0;
    }

    /*
     * ------------------------
     * sidebar
     * toc-content
     * ------------------------
    */
    .outline-content {
        padding: 8px;
        font-size: 7px !important;
    }

    .outline-content li {
        position: relative;
        z-index: 30;
        line-height: 1.3 !important;
        margin-bottom: 0;
    }

    .outline-content li::before {
        content: '';
        width: 1px;
        height: calc(100% + 2px);
        position: absolute;
        z-index: 30;
        left: 0;
        top: 0;
        background: var(--border-color);
    }

    .outline-content>li:first-of-type::before {
        top: 0;
    }

    .outline-content li a {
        font-size: 7px !important;
    }

    .outline-content li ul {
        margin-left: 9px;
        position: relative;
        z-index: 48;
    }

    .outline-content ul li::before {
        content: '';
        width: 1px;
        height: calc(100% + 5px);
        top: - 5px;
    }

    .outline-content ul>li:last-of-type::before {
        content: '';
        width: 1px;
        height: 5px;
        top: - 5px;
    }

    .outline-content li .outline-item {
        margin: 0 0 1px 3px;
        padding: 2px 4px;
        position: relative;
        z-index: 50;
        border-radius: 2px;
        border: 1px solid transparent;
    }

    .outline-content li .outline-item:hover,
    .outline-content li .outline-item-active {
        z-index: 70;
    }

    .outline-content .outline-label {
        margin: 0;
        padding: 0;
        position: relative;
        z-index: 70;
        background: var(--bg-color);
        text-decoration: none;
    }

    .outline-content li .outline-item::before {
        content: '';
        width: 6px;
        height: calc(50% + 6px);
        position: absolute;
        z-index: 38;
        left: -3px;
        top: - 6px;
        background: transparent;
        border-left: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .outline-content>li:first-of-type>.outline-item::before {
        top: calc(50% - 1px) !important;
        border-top: 1px solid var(--border-color);
        border-bottom: none;
        border-top-left-radius: 1px;
        -webkit-border-top-left-radius: 1px;
        border-bottom-left-radius: 0;
        -webkit-border-bottom-left-radius: 0;
    }

    .outline-content>li:first-of-type>.outline-item::after {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        z-index: 35;
        left: -3px;
        top: -1px;
        background: var(--bg-color);
    }

    .outline-content>li:last-of-type>.outline-item::before,
    .outline-content>li ul>li:last-of-type>.outline-item::before {
        z-index: 90;
        background: transparent;
        border-left: 1px solid var(--border-color);
        border-top: 1px solid var(--border-color);
        border-top: none !important;
        border-bottom-left-radius: 1px;
        -webkit-border-bottom-left-radius: 1px;
        border-top-left-radius: 0;
        -webkit-border-top-left-radius: 0;
    }

    .outline-content>li:only-of-type>.outline-item::before,
    .outline-content>li:last-of-type::before {
        display: none;
    }

    .outline-content>li:only-of-type {
        margin-left: -3px;
    }

    .outline-expander {
        padding-left: 0;
        width: auto;
        height: 4px;
        background: transparent;
    }

    .outline-expander:before {
        font-size: 5px;
        padding: 0 1px 0 1px;
        margin-top: -1px;
        margin-left: -1px;
        background: transparent;
    }

    .outline-item:hover,
    .outline-item:hover>.outline-label,
    .outline-item:hover>.outline-expander:before,
    .outline-item:hover>.outline-expander,
    .outline-item-active,
    .outline-item-active>span,
    .outline-item-active>.outline-expander:before {
        background: var(--bg-color2) !important;
        color: var(--color-1) !important;
    }

    .outline-item:hover {
        z-index: 70;
    }

    .outline-item:hover::before,
    .outline-item-active::before {
        width: 3px !important;
    }

    .outline-item-active .outline-expander {
        font-weight: bold !important;
    }

    /*ty-on-outline-filter(catalog search style)*/
    .ty-on-outline-filter .outline-content li::before,
    .ty-on-outline-filter .outline-content .outline-item::before,
    .ty-on-outline-filter .outline-content .outline-item::after {
        display: none;
    }

    .ty-on-outline-filter .outline-content>li>ul,
    .ty-on-outline-filter .outline-content .outline-item {
        margin-left: 0;
    }

    /*
     * --------------------------
     * file-library-list
     * file-library-search-result
     * --------------------------
    */
    #file-library-list,
    #file-library-search-result {
        padding: 6px;
    }

    /*ty-search-item*/
    #file-library-list .file-list-item,
    #file-library-search-result .ty-search-item {
        margin-bottom: 4px;
        border: 1px solid transparent;
        border-bottom-color: var(--border-color);
    }

    #file-library-list .file-list-item {
        padding-left: 6px;
        padding-right: 6px;
    }

    #file-library-list .file-list-item.active,
    #file-library-search-result .ty-search-item.active {
        border-radius: 2px;
        border: 1px solid var(--color-1);
    }

    #file-library-list .file-list-item.active {
        padding: 3px 6px;
    }

    #file-library-search-result .ty-search-item.active {
        padding: 3px 6px 3px 0;
    }

    #file-library-list .file-list-item:first-of-type.active,
    #file-library-search-result .ty-search-item:first-of-type.active {
        margin-top: 0;
    }

    #file-library-list .file-list-item:hover,
    #file-library-search-result .ty-search-item:hover {
        border-radius: 2px;
        background: var(--bg-color2);
        border-color: var(--border-color);
    }

    #file-library-list .file-list-item:hover {
        color: var(--color-1);
    }

    #file-library-search-result .ty-search-item.active {
        color: var(--text-color);
    }

    #file-library-search-result .ty-search-item.active .ty-search-item-line {
        white-space: normal;
        word-break: break-word;
    }

    .file-list-item-time {
        margin-right: 0;
        padding-right: 0;
    }

    .file-list-item-count {
        margin-right: 0;
        padding: 0 3px;
        border-radius: 1px;
    }

    #file-library-search-result .ty-search-item.active .file-list-item-count {
        padding-right: 0;
    }

    #sidebar-loading-template {
        padding: 4px;
        border-radius: 2px;
        margin-bottom: 2px;
        display: none;
    }

    .ty-file-search-match-text {
        background-color: var(--color-2-0-c);
    }

    /*
     * ------------------------
     * file-library tree
     * ------------------------
    */
    #file-library-tree {
        padding-top: 4px;
        padding-left: 6px;
        padding-right: 6px;
        box-sizing: border-box;
    }

    .sidebar-tab-btn {
        font-size: 8px !important;
        line-height: 10px !important;
        vertical-align: text-top;
        margin-top: 6px !important;
        color: var(--title-color);
    }

    .sidebar-tab-btn:hover {
        color: var(--color-1);
    }

    .ty-sidebar-search-panel .searchpanel-search-option-btn {
        top: 4px;
    }

    .file-tree-node {
        position: relative;
        padding-left: 0;
        margin-left: 0;
    }

    .file-library-node .file-node-children {
        margin-left: 6px;
    }

    .file-node-expanded>.file-node-children {
        margin-left: 14px;
    }

    .file-tree-node.active>.file-node-background {
        border-radius: 2px;
        border: none;
    }

    .fa-folder:before,
    .fa-folder:after,
    .fa-caret-right,
    .fa-caret-down {
        color: var(--text-grey);
    }

    .ty-on-outline-filter .ty-outline-hit {
        color: var(--color-1);
    }

    /*
     * ------------------------
     * md-notification-container
     * ------------------------
    */
    #md-notification {
        position: relative;
    }

    #md-notification::before {
        font-size: 9px;
        top: 6px;
    }

    #md-notification p {
        margin: auto;
        font-size: 7px;
    }

    #md-notification>p {
        margin-top: 5px;
    }

    #md-notification-content span {
        margin-bottom: 2px;
        margin-left: 4px;
    }

    .typora-search-spinner>div {
        background: var(--color-1);
    }

    /*
     * ------------------------
     * TOC md-toc
     * ------------------------
    */
    .md-toc {
        font-size: 7px;
        margin: 10px 0 0 0;
        background: var(--bg-color2);
    }

    .md-toc-content {
        padding: 10px 15px;
        margin: 8px 0;
    }

    .md-toc-content .md-toc-item {
        margin-bottom: 3px;
    }

    #write div.md-toc-tooltip {
        position: relative;
        margin: 6px 0 3px;
    }

    #write div.md-toc-tooltip .md-delete-toc {
        padding: 0 6px;
        background: var(--bg-color);
    }

    #write div.md-toc-tooltip .md-delete-toc:hover {
        color: var(--color-1);
        background: var(--bg-color2);
    }

    /*
     * ------------------------
     * code colors
     * ------------------------
    */
    .cm-s-inner {
        background-color: transparent !important;
        color: var(--text-code);
    }

    .cm-s-inner .CodeMirror-gutters {
        background: transparent !important;
        color: var(--text-code);
        border: none;
    }

    .cm-s-inner .CodeMirror-guttermarker,
    .cm-s-inner .CodeMirror-guttermarker-subtle,
    .cm-s-inner .CodeMirror-linenumber {
        color: var(--md-char-color);
    }

    .cm-s-inner .CodeMirror-cursor {
        border-left: 1px solid var(--border-color);
    }

    .cm-s-inner div.CodeMirror-selected,
    .cm-s-inner.CodeMirror-focused div.CodeMirror-selected,
    .cm-s-inner .CodeMirror-line::selection,
    .cm-s-inner .CodeMirror-line>span::selection,
    .cm-s-inner .CodeMirror-line>span>span::selection,
    .cm-s-inner .CodeMirror-line::-moz-selection,
    .cm-s-inner .CodeMirror-line>span::-moz-selection,
    .cm-s-inner .CodeMirror-line>span>span::-moz-selection {
        background: var(--color-2-0-c);
    }

    .cm-s-inner .CodeMirror-activeline-background {
        background: transparent;
    }

    .cm-s-inner .cm-keyword {
        color: #bb59fd;
    }

    .cm-s-inner .cm-operator {
        color: #6ac0df;
    }

    .cm-s-inner .cm-variable {
        color: #f4395dff;
    }

    .cm-s-inner .cm-variable-2 {
        color: #e2785f;
    }

    .cm-s-inner .cm-variable-3 {
        color: #0d50cc;
    }

    .cm-s-inner .cm-builtin {
        color: #f61d78;
    }

    .cm-s-inner .cm-atom {
        color: #fa5336;
    }

    .cm-s-inner .cm-number {
        color: #f59102;
    }

    .cm-s-inner .cm-def {
        color: #4087fd;
    }

    .cm-s-inner .cm-string {
        color: #00a866;
    }

    .cm-s-inner .cm-string-2 {
        color: #01b001;
    }

    .cm-s-inner .cm-comment,
    .cm-s-inner .cm-meta {
        color: var(--md-char-color);
    }

    .cm-s-inner .cm-attribute {
        color: #c08b01;
    }

    .cm-s-inner .cm-property {
        color: #1b9f72;
    }

    .cm-s-inner .cm-qualifier {
        color: #dc7b45;
    }

    .cm-s-inner .cm-tag {
        color: #e32e73;
    }

    .cm-s-inner .cm-tag.cm-bracket {
        color: #01a2da;
    }

    .cm-s-inner .CodeMirror-matchingbracket {
        text-decoration: underline;
        color: var(--text-code) !important;
    }

    /* apply to code fences with plan text*/
    .md-fences {
        background-color: var(--bg-color2);
        color: var(--text-grey);
    }

    .md-fences .code-tooltip {
        background-color: var(--bg-color2);
        color: var(--text-color);
        border-radius: 2px;
        z-index: 50;
        padding: 0;
        bottom: -2.9em;
    }

    .md-fences .code-tooltip input,
    .md-fences .code-tooltip span {
        padding: 1px;
        border-radius: 2px;
    }

    /*
     * ------------------------
     * export html
     * ------------------------
    */
    body.typora-export {
        padding-left: 0;
        padding-right: 0;
    }

    .typora-export-content,
    .typora-export-show-outline .typora-export-content {
        width: 100vw;
        max-width: 1280px;
        height: 100vh;
        margin: 0 auto;
    }

    .typora-export-sidebar {
        margin-right: 0;
        margin-top: 0;
        border-right: 1px solid var(--border-color);
    }

    .typora-export-sidebar .outline-content {
        padding-top: 9px;
    }

    .typora-export-sidebar .outline-content li ul {
        margin-left: 10px;
        z-index: 55;
    }

    .typora-export-sidebar .outline-content .outline-item-active>.outline-item {
        position: relative;
        z-index: 70;
    }

    .typora-export .outline-content li a {
        font-weight: normal;
        padding: 1px 0;
    }

    .typora-export-sidebar .outline-content li,
    .typora-export-sidebar .outline-content li>.outline-item {
        background: var(--bg-color) !important;
        color: var(--text-color) !important;
    }

    .typora-export-sidebar .outline-content ul li::before,
    .typora-export-sidebar .outline-content ul>li:last-of-type::before {
        top: 0;
    }

    .typora-export .outline-content li .outline-item::before {
        height: calc(50% + 6px);
        top: - 6px;
    }

    .typora-export-no-collapse-outline .outline-content li .outline-item::before {
        height: calc(50% + 5px);
        top: - 5px;
    }

    .typora-export .outline-expander::before {
        content: "";
        width: 3px;
        height: 3px;
        background: transparent;
        box-sizing: border-box;
        border-top: 1px solid var(--text-color);
        border-right: 1px solid var(--text-color);
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        margin-right: 2px;
        margin-top: 1px;
    }

    .typora-export .outline-expander:hover::before {
        content: "";
        width: 3px;
        height: 3px;
        background: transparent;
        box-sizing: border-box;
        border-top: 1px solid var(--text-color);
        border-right: 1px solid var(--text-color);
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        margin-right: 2px;
        margin-left: 1px;
        margin-top: -1px;
    }

    .typora-export .outline-item-open>.outline-item>.outline-expander::before {
        content: "";
        width: 3px;
        height: 3px;
        background: transparent;
        box-sizing: border-box;
        border-top: 1px solid var(--text-color);
        border-right: 1px solid var(--text-color);
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        margin-right: 2px;
        margin-left: 1px;
        margin-top: -1px;
    }

    .typora-export-sidebar .outline-content li .outline-item:hover,
    .typora-export-sidebar .outline-content .outline-item-active>.outline-item,
    .typora-export-sidebar .outline-content .outline-item-active>.outline-item>.outline-label {
        background: var(--bg-color2) !important;
        color: var(--color-1) !important;
    }

    .typora-export-sidebar .outline-content li>.outline-item:hover>.outline-expander::before {
        border-color: var(--color-1);
    }

    .typora-export-sidebar .outline-item-active>.outline-item::before {
        width: 3px;
    }

    .typora-export .outline-item:hover {
        margin-right: 0;
    }

    .typora-export-sidebar .outline-item-active::before {
        width: 1px !important;
    }

    .typora-export-sidebar .outline-content .outline-item-active>.outline-item>.outline-expander::before {
        border-width: 1px !important;
        border-color: var(--color-1);
    }

    .typora-export-no-collapse-outline .outline-expander {
        display: none;
    }

    /**
     * --------------------------------------
     * unibody-window
     * Control UI on Windows/Linux (optional)
     * --------------------------------------
    */
    body.unibody-window,
    body.typora-export {
        letter-spacing: 1px;
    }

    .unibody-window .outline-content li .outline-item::before {
        height: calc(50% + 6px);
        top: - 6px;
    }

    .unibody-window #write ul,
    .typora-export #write ul {
        padding-left: 17px;
    }

    .unibody-window #write ol,
    .typora-export #write ol {
        padding-left: 18px;
    }

    .unibody-window #write ul ul,
    .unibody-window #write ol ol,
    .unibody-window #write ul>li>ol,
    .unibody-window #write ol>li>ul,
    .typora-export #write ul ul,
    .typora-export #write ol ol,
    .typora-export #write ul>li>ol,
    .typora-export #write ol>li>ul {
        margin-left: 0;
    }

    .unibody-window #write ul>li>p,
    .typora-export #write ul>li>p {
        margin: 0;
    }

    .unibody-window #write ol>li>p,
    .typora-export #write ol>li>p {
        margin: 0 0 0 -1px;
    }

    .unibody-window #write ul>.task-list-item>input,
    .typora-export #write ul>.task-list-item>input {
        margin-left: -11px;
    }

    .unibody-window #megamenu-menu-sidebar {
        --bg-color: #1b1b1f;
        --bg-color2: rgb(40, 42, 50);
        --border-color: rgb(60, 62, 70);
        overflow: hidden;
    }

    #megamenu-menu-sidebar .megamenu-menu-list {
        border: none;
    }

    #recent-file-panel-search-input,
    .megamenu-menu-panel .btn,
    .dropdown-menu li a {
        border-radius: 2px !important;
    }

    .unibody-window .long-btn {
        border-radius: 4px !important;
    }

    /* .dropdown-menu */
    .dropdown-menu {
        padding: 3px !important;
        border-radius: 4px !important;
        border: 1px solid var(--border-color);
    }

    .dropdown-menu li {
        border-radius: 2px !important;
    }

    .ty-spell-check-panel-item {
        border-radius: 2px;
        margin-bottom: 2px;
    }

    .btn-split-group .dropdown-menu {
        margin-top: 0;
    }

    .input-group-content .dropdown-menu li:hover {
        border-radius: 2px;
        background: var(--bg-color2);
    }

    .dropdown-menu li:hover a {
        color: var(--color-1);
    }

    .dropdown-menu li a {
        font-size: 7px;
    }

    .dropdown-menu table th,
    .dropdown-menu table td {
        padding: 2px !important;
    }

    #sidebar-files-menu li:hover a {
        color: var(--color-1) !important;
    }

    #close-sidebar-menu-btn:hover {
        color: var(--color-1);
    }

    .unibody-window .long-btn:hover span,
    .unibody-window .long-btn:hover i,
    .megamenu-menu-panel .btn:hover,
    #megamenu-menu-header-title:hover,
    .toolbar-icon:hover,
    #megamenu-back-btn:hover i {
        color: var(--color-1) !important;
        text-decoration: none;
    }

    .unibody-window .long-btn:hover,
    .megamenu-menu-panel .btn:hover,
    #megamenu-back-btn:hover {
        border-color: var(--color-1);
        background: var(--bg-color2);
    }

    #w-traffic-lights span {
        background: transparent !important;
        border-radius: 0 !important;
        border: none !important;
    }

    #w-traffic-lights span:hover {
        background: var(--color-1-0-b) !important;
    }

    #w-traffic-lights #w-close:hover {
        background: var(--color-5) !important;
        color: #fff !important;
    }

    #top-titlebar .btn {
        margin: 0 !important;
    }

    /* .megamenu-men */
    .megamenu-menu-panel .btn {
        padding: 3px 6px;
    }

    .megamenu-content {
        padding-right: 15px;
    }

    #open-theme-folder-btn {
        margin-top: 24px;

    }

    .megamenu-menu {
        background: var(--bg-color);
    }

    .megamenu-menu-header {
        border-color: var(--bg-color2);
    }

    #megamenu-back-btn {
        border-radius: 2px;
        border-color: var(--border-color);
        margin-left: 5px;
    }

    #megamenu-menu-list {
        padding: 0 4px;
    }

    .megamenu-menu-list li {
        margin-top: 3px;
    }

    .megamenu-menu-list li a {
        font-size: 8px;
        border-radius: 2px;
        display: block;
        border: 1px solid transparent;
        line-height: 17px;
    }

    .megamenu-menu-list li a .fa {
        font-size: 9px;
        line-height: 19px;
        display: inline-block;
        margin-left: 0;
        opacity: 1;
    }

    .megamenu-menu-list li #m-saved .fa {
        font-size: 10px;
        line-height: 18px !important;
        color: var(--color-2);
    }

    .megamenu-menu-list li a:hover,
    .megamenu-menu-list li a.active:hover {
        color: var(--color-1) !important;
        background: var(--bg-color2) !important;
        border: 1px solid var(--color-1);
    }

    .megamenu-menu-list li a:hover,
    .megamenu-menu-list li a.active {
        background: var(--bg-color2);
    }

    .megamenu-menu-list li a.active {
        color: var(--color-1) !important;
    }

    @media (max-width: 265px) {
        #megamenu-back-btn {
            margin-left: 0;
        }

        .megamenu-menu-list li a i {
            margin-left: 5px;
        }
    }

    #recent-file-panel-action-btn-container {
        margin-right: 0;
    }

    #recent-file-panel-search-input {
        width: calc(100% - 27px);
    }

    #megamenu-clear-recet-documents {
        background: var(--bg-color2);
        padding: 2px 5px;
        border-radius: 2px;
        font-size: 7px;
    }

    #megamenu-clear-recet-documents:hover {
        color: var(--color-1);
    }

    .ty-show-search #info-panel-tab-search .info-panel-tab-border,
    .ty-show-search #info-panel-tab-search .info-panel-tab-border,
    .active-tab-files #info-panel-tab-file .info-panel-tab-border,
    .active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
        border-radius: 1px;
        height: 1px;
    }

    #file-library-search-input {
        border-radius: 0 !important;
        top: 2px;
    }

    #close-outline-filter-btn {
        top: 4px;
        border: none !important;
        background: transparent !important;
    }

    .unibody-window .sidebar-content {
        top: 29px;
    }

    .native-window #file-library-search-input,
    .unibody-window #file-library-search-input {
        border-radius: 2px !important;
        height: 14px;
    }

    .megamenu-menu-panel {
        scrollbar-width: none;
    }

    #theme-preview-grid {
        max-width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        justify-content: space-between;
        grid-gap: 16px;
    }

    @media (max-width: 600px) {
        #theme-preview-grid {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }

    .theme-preview-div {
        border: 1px solid var(--border-color);
        padding: 2px;
        box-sizing: border-box;
        margin: 0;
        overflow: hidden;
        color: var(--color-1);
        border-radius: 4px;
    }

    .theme-preview-div:hover {
        border-color: var(--color-1);
    }

    .theme-preview-div.active {
        border-color: var(--color-2);
    }

    .theme-preview-div .fa {
        color: var(--color-2);
    }

    .theme-preview-content {
        width: 100%;
        height: 100%;
        border-radius: 2px;
    }

    #outline-btn:hover {
        color: var(--color-1) !important;
    }

    /* context menu */
    .context-menu {
        border-radius: 2px !important;
        padding: 2px !important;
        border: 1px solid var(--border-color);
    }

    .context-menu li a {
        display: inline-block;
        width: 100%;
        border-radius: 2px !important;
    }

    .context-menu>.active a {
        color: var(--color-1) !important;
    }

    .tb43e-d6bd-dbe4y {
        background: var(--bg-color2);
    }

    /*
     * ------------------------
     * UI-controls
     * dialogs
     * ------------------------
    */
    #md-searchpanel input,
    #md-replace-type-label,
    #search-panel-replace-btn,
    .modal-content,
    .modal-dialog,
    .modal-title,
    .modal-content {
        border-radius: 2px;
    }

    .modal-content {
        padding: 3px;
    }

    #sidebar-files-menu li a {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    #sidebar-files-menu .file-action-item {
        line-height: 15px;
    }

    /* footer */
    #footer-word-count-info {
        border-radius: 2px;
        padding: 3px;
        border: 1px solid var(--border-color);
    }

    #footer-word-count-info table {
        border-radius: 0;
    }

    #footer-word-count-info table tr>td:first-of-type {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }

    #footer-word-count-info table tr>td:last-of-type {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }

    /**
     * ---------------------------------
     * Control UI on Mac (optional)
     * ---------------------------------
    */
    #typora-quick-open {
        background-color: var(--bg-color);
        border: 1px solid var(--border-color);
        padding: 6px;
        border-radius: 4px;
    }

    .typora-quick-open-item,
    .md-hover-tip .code-tooltip-content {
        border-radius: 2px;
        overflow-x: scroll;
    }

    .code-tooltip.md-hover-tip,
    .md-hover-tip .code-tooltip-content,
    .md-arrow::after {
        border-bottom-color: var(--color-1) !important;
        background: var(--color-1) !important;
        box-shadow: 0 1px 2px var(--color-1) !important;
    }

    .md-hover-tip .md-arrow::after {
        box-shadow: none !important;
    }

    .md-hover-tip .code-tooltip-content:hover a {
        color: var(--color-2) !important;
    }

    /*
     * ------------------------
     * #root
     * .ty-preferences
     * ------------------------
    */
    .sidebar {
        position: relative;
    }

    .sidebar:after {
        content: '';
        display: block;
        position: absolute;
        width: 1px;
        height: 100%;
        right: -12px;
        top: 0;
        background: var(--border-color);
    }

    .ty-preferences a {
        font-size: 6px !important;
        color: var(--color-1);
        text-decoration: none;
    }

    .ty-preferences a:hover {
        text-decoration: underline;
        color: var(--color-2);
    }

    .export-item.active,
    .export-items-list-control {
        border-radius: 1px !important;
    }

    .nav-group-item {
        border-radius: 2px !important;
    }

    .input-group table,
    .export-detail {
        border-radius: 2px !important;
    }

    .export-detail .file-input input {
        padding-left: 4px !important;
        height: 15px !important;
        border-color: var(--border-color) !important;
    }

    .search-input {
        padding: 3px 6px !important;
        border-color: var(--border-color) !important;
    }

    .label-input-group div {
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .label-input-group div pre {
        border-radius: 2px !important;
        font-size: 7px !important;
    }

    .input-group-content {
        border-radius: 2px !important;
    }

    .input-group-content table {
        margin-top: 2px;
    }

    .label-hint svg {
        margin-right: 1px;
    }

    .export-detail .input-group-content>.row {
        margin-right: 8px;
    }

    .export-detail,
    .export-item.active {
        color: var(--text-color) !important;
    }

    .export-item.active {
        color: var(--color-1) !important;
    }

    #md-notification {
        top: -3px;
    }

    .md-show-hint::after {
        background: var(--color-1-0-b) !important;
        border-radius: 1px;
        box-shadow: 0 0 2px var(--color-1) !important;
    }

    /*
     * ------------------------
     * diagram
     * ------------------------
    */
    .md-diagram-panel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 4px;
        margin-top: 10px;
        border-color: var(--border-color) !important;
        background: var(--bg-color2) !important;
    }

    .md-diagram {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .md-diagram-panel>svg {
        width: 100% !important;
        max-width: 100% !important;
    }

    /*
     * ------------------------
     * @media print
     * ------------------------
    */
    @media print {

        table,
        pre {
            page-break-inside: avoid;
        }

        pre {
            word-wrap: break-word;
        }
    }

    /*
     * ------------------------
     * @media screen
     * ------------------------
    */
    @media screen and (max-width: 384px) {
        #write {
            padding: 0 16px 16px;
        }

        h2.md-focus:before,
        h3.md-focus:before,
        h4.md-focus:before,
        h5.md-focus:before,
        h6.md-focus:before,
        h2:before,
        h3:before,
        h4:before,
        h5:before,
        h6:before {
            left: -15px;
        }
    }

    @media screen and (min-width: 384px) and (max-width: 640px) {
        #write {
            padding: 0 32px 16px;
        }
    }
}